// 获取滚动条滚动距离
function getScrollOffset() {
    if (typeof window.pageXOffset === 'number') {
        return {
            x: window.pageXOffset,
            y: window.pageYOffset
        }
    } else {
        return {
            x: document.documentElement.scrollLeft + document.body.scrollLeft,
            y: document.documentElement.scrollTop + document.body.scrollTop
        }
    }
}
// 获取浏览器可视区域尺寸
function getViewportOffset() {
    if (window.innerWidth) {            // ie8之后的浏览器
        return {
            width: window.innerWidth,
            height: window.innerHeight
        }
    }
    if (window.compatMode === 'CSS1Compat') { // 兼容模式
        return {
            width: document.documentElement.clientWidth,
            height: document.documentElement.clientHeight
        }
    } else if (window.compatMode === 'BackCompat') { // 非常造的浏览器
        return {
            width: document.body.clientWidth,
            height: document.body.clientHeight
        }
    }
}

function getDirection(wrapper, e, origin) {
    // 盒子位置
    var boxTop = wrapper.offsetTop;
    var boxLeft = wrapper.offsetLeft;
    // 元素尺寸
    var oHeight = origin.offsetHeight;
    var oWidth = origin.offsetWidth;
    // 滚动条位置
    var scrollTop = getScrollOffset().y;
    var scrollLeft = getScrollOffset().x;
    // 元素的位置
    var oTop = origin.offsetTop + boxTop;
    var oLeft = origin.offsetLeft + boxLeft;
    // 元素相对视口的位置
    var top = oTop - scrollTop;
    var left = oLeft - scrollLeft;
    // 鼠标进入元素是的位置
    var inX = e.clientX || (e.pageX - scrollLeft);
    var inY = e.clientY || (e.pageY - scrollTop);
    // 鼠标以元素为中心的坐标
    var x = (inX - (oWidth / 2 + left)) * (oWidth > oHeight ? oHeight / oWidth : 1);
    var y = (inY - (oHeight / 2 + top)) * (oHeight > oWidth ? oWidth / oHeight : 1);
    // 根据鼠标位置求出 角度
    var d = (Math.round((Math.atan2(y, x) * (180 / Math.PI) + 180) / 90) + 3) % 4;
    var dirArr = ['top', 'right', 'bottom', 'left'];
    return dirArr[d]
}
// 获取元素计算属性
function getStyle(dom, attr) {
    if (window.getComputedStyle) {
        return window.getComputedStyle(dom, null)[attr];
    } else {
        return dom.currentStyle[attr];
    }
}
// 给dom添加样式
function setStyle(dom, obj) {
    for (var item in obj) {
        dom.style[item] = obj[item];
    }
}
function move(dom, direction, type) {
    var oHeight = dom.offsetHeight;
    var oWidth = dom.offsetWidth;
    var title = dom.getElementsByTagName('p')[0];
    if (type === 'in') {
        switch (direction) {
            case 'top':
                setStyle(title, {top: -oHeight + 'px', left: '0px'});
                startMove(title, {top: 0});
                break;
            case 'right':
                setStyle(title, {top: '0px', left: oWidth + 'px'});
                startMove(title, {left: 0});
                break;
            case 'bottom':
                setStyle(title, {top: oHeight + 'px', left: '0px'});
                startMove(title, {top: 0});
                break;
            case 'left':
                setStyle(title, {top: '0px', left: -oWidth + 'px'});
                startMove(title, {left: 0});
                break;
            default:
                break;
        }
    } else {
        switch (direction) {
            case 'top':
                startMove(title, {top: -oHeight});
                break;
            case 'right':
                startMove(title, {left: oWidth});
                break;
            case 'bottom':
                startMove(title, {top: oHeight});
                break;
            case 'left':
                startMove(title, {left: -oWidth});
                break;
            default:
                break;
        }
    }
}

// 运动函数
function startMove(dom, options, time, callback) {
    clearInterval(dom.timer);
    var speed = null;
    var iCur = null;
    var stop = true;
    time = time || 16;
    dom.timer = setInterval(function () {
        for (var attr in options) {
            console.log(attr)
            if (attr === 'opacity') {
                iCur = parseFloat(getStyle(dom, attr)) * 100;
            } else {
                iCur = parseInt(getStyle(dom, attr))
            }
            speed = attr === 'opacity' ? ((options[attr] * 100) - iCur) / 8 : (options[attr] - iCur) / 8
            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
            if (attr === 'opacity') {
                dom.style[attr] = (iCur + speed) / 100;
            } else {
                dom.style[attr] = iCur + speed + 'px';
            }
            stop = attr === 'opacity' ? iCur === options * 100 : iCur === options[attr];
            if (stop) {
                clearInterval(dom.timer);
                typeof callback === 'function' && callback();
            }
        }
    }, time);
}